import { Component, OnInit } from '@angular/core';
import { extend } from 'lodash';
import { BaseFieldComponent } from '../base-field/base-field.component';
import { EChartsOption } from 'echarts';
import { PermitConfig } from '../../../models';

@Component({
  selector: 'zepride-chart-pie',
  templateUrl: './chart-pie.component.html',
  styleUrls: ['./chart-pie.component.less']
})
export class ChartPieComponent extends BaseFieldComponent implements OnInit {

  option: EChartsOption = {};

  width = '450px';
  radius = '';
  permitConfig: PermitConfig[] = [
    { mode: 'query', permitId: '查看', permitName: '', authObjectId: '' }
  ];

  ngOnInit(): void {
    this.initValue();
    this.initChart();

  }
  initValue() {
    if (this.componentData.extends && this.componentData.extends.style) {
      if (this.componentData.extends.style === 'solid') {
        this.radius = '2%';
      } else if (this.componentData.extends.style === 'hollow') {
        this.radius = '50%';
      } else {
        this.radius = '70%';
      }
    }

    if (this.componentData.extends && this.componentData.extends.width) {
      if (this.componentData.extends.width === 'half') {
        this.width = '450px';
      } else {
        this.width = '550px';
      }
    }
  }
  // 初始化表格对象
  initChart() {
    this.option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: '5%',
        top: '30%',
        itemWidth: 13,
        data: ['数据一', '数据二', '数据三', '数据四', '数据五', '数据六']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          center: ['50%', '60%'],
          data: [
            {
              value: 585, name: '数据一',
              itemStyle: {
                color: 'red'
              }
            },
            {
              value: 108, name: '数据二',
              itemStyle: {
                color: 'blue'
              }
            },
            {
              value: 497, name: '数据三',
              itemStyle: {
                color: 'rgb(14, 142, 222)'
              }
            },
            {
              value: 452, name: '数据四',
              itemStyle: {
                color: 'green'
              }
            },
            {
              value: 199, name: '数据五',
              itemStyle: {
                color: 'yellow'
              }
            },
            {
              value: 289, name: '数据六',
              itemStyle: {
                color: 'orange'
              }
            },

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          left: '20%',
          label: {
            color: 'rgba(24, 116, 215, 1)',
            distanceToLabelLine: 5, // 标签与提示线距离
            // position: "outer",
            // alignTo: 'edge',
            // margin: '5%'
            // padding: [-30, -20],
            // position: [30, 30],
            // width: 50,
            // height: 50,
            // align: 'left',
            // verticalAlign: 'top'
          },
          startAngle: 125,
          itemStyle: {
            borderWidth: 1,
            borderColor: 'white'
          },
          labelLine: {
            show: true,
            length2: 0,
            smooth: true,
            length: 20,
            // lineStyle: {
            //   color: "blue"
            // }
          },
          radius: [this.radius, '75%']
        }
      ]
    };
  }
}
